import React, {FC, useEffect} from 'react'
import {Form, Row, Col, Input} from 'antd'
import {PageType} from '../constant'
import styles from './index.less'

interface EmergencyContactType {
	pageType: string
	emergencyContactFrom: any
	detailRecord?: Record<string, any>
}

const emergencyContact: FC<EmergencyContactType> = ({
	pageType,
	detailRecord,
	emergencyContactFrom,
}) => {
	const initForm = () => {
		if (pageType !== PageType.add && detailRecord) {
			const obj = {
				emergencyContactName: detailRecord.emergencyContactName,
				emergencyContactPhone: detailRecord.emergencyContactPhone,
			}
			emergencyContactFrom.setFieldsValue(obj)
		}
	}

	useEffect(() => {
		initForm()
	}, [detailRecord])

	return (
		<div className={styles.emergencyContact}>
			<div className={styles.titleBox}>紧急联系人</div>
			<div style={{padding: '12px 0'}}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="emergencyContactFrom"
					form={emergencyContactFrom}
					disabled={pageType === PageType.detail}>
					<Row>
						<Col span={8}>
							<Form.Item
								name="emergencyContactName"
								label="紧急联系人姓名"
								rules={[{required: true, max: 10}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								name="emergencyContactPhone"
								label="紧急联系人电话"
								rules={[
									{required: true},
									{
										pattern:
											/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
										message: '请输入正确的手机号',
									},
								]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}> </Col>
					</Row>
				</Form>
			</div>
		</div>
	)
}
export default emergencyContact
